<template>
  <div class="layout-container user-contain">
    <PageHeader title="用户管理">
      <template #btns>
        <div class="btns common-buttons">
        <el-button type='primary' :icon="Plus" @click="ondialogAddFormVisible">
        添加新用户
      </el-button>
        </div>
      </template>
      <template #search>
        <el-form :model="formtable" ref="formtableref">
        <div class="search">
          <div class="span1">
            <span>用户姓名</span>
          </div>
          <el-form-item prop="username">
            <el-input v-model.trim="formtable.username" autocomplete="off" placeholder="请输入" />
          </el-form-item>
          <!-- <el-select v-model.trim="formtable.username" :loading="usernameloading" filterable remote :remote-method="getusernameOptions" placeholder="请输入" clearable>
            <el-option 
              v-for="item in usernameOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select> -->
          <div class="span1">
            <span>所属机构</span>
          </div>
          <el-form-item  prop="userOrg">
            <el-input v-model.trim="formtable.userOrg" autocomplete="off" placeholder="请输入" />
          </el-form-item>
          <!-- <el-select v-model="formtable.institution" placeholder="请选择" clearable>
            <el-option
              v-for="item in category"
              :key="item.roleOrg"
              :label="item.roleOrg"
              :value="item.roleOrg">
            </el-option>
          </el-select> -->
          <!-- <div class="span1">
            <span>工号</span>
          </div>
          <el-input v-model.trim="formtable.jobid" autocomplete="off" placeholder="请输入" />-->
          <!-- <el-select v-model.trim="formtable.jobid" :loading="jobidloading" filterable remote :remote-method="getjobidOptions" placeholder="请输入" clearable>
            <el-option 
              v-for="item in jobidOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select> -->
          <div class="span1">
            <span>角色权限</span>
          </div>
          <el-form-item  prop="power">
            <el-input v-model.trim="formtable.power" autocomplete="off" placeholder="请输入" />
          </el-form-item>
          <!-- <el-select v-model="formtable.power" placeholder="请选择" clearable>
            <el-option 
              v-for="item in category"
              :key="item.permission"
              :label="item.permission"
              :value="item.permission">
            </el-option>
          </el-select> -->
          <div class="common-buttons">
            <el-button type="info" :icon="Search" @click="onQuery({ pageNo: 1 })">搜索</el-button>
            <el-button type="info" @click="formReset(formtableref)">重置</el-button>
          </div>
 
        </div>
      </el-form>
      </template>
    </PageHeader>
    <!-- 表格 -->
    <div class="layout-container-table">
      <CommonTable 
      :showSelection=false
      v-loading="loading" 
      v-model:page="page"
      :total="total"
      :data="state.tableData"
      @onQuery="onQuery"
      :header-cell-style="{'text-align':'center'}" 
      :cell-style="{'text-align':'center'}"  
      style="width: 100%">
        <el-table-column prop="nickName" label="用户姓名" sortable />
        <el-table-column prop="loginName" label="帐号" sortable />
        <el-table-column prop="roleName" label="角色名称" sortable />
        <el-table-column prop="userOrg" label="所属机构" sortable />
        <el-table-column prop="loginDate" label="上次登入时间" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button @click="onEdit(scope.row)" text>修改</el-button>
            <el-button @click="onCheck(scope.row)" text>查看</el-button>
            <el-button @click="onDelete(scope.row)" text>删除</el-button>
          </template>
        </el-table-column>
      </CommonTable>
    </div>
    <!-- 添加对话框 -->
    <el-dialog v-model="dialogAddFormVisible" title="添加用户" width="1100" :inline="true" :show-close="false" style="text-align: left;">
      <el-form ref="Addform_ref" :model="Addform" :rules="addrules" >
        <el-row>
          <el-col :span="8" >
            <el-form-item label="用户姓名" :label-width="formLabelWidth" prop="nickName">
              <el-input v-model.trim="Addform.nickName" placeholder="请输入" autocomplete="off" />
            </el-form-item>
            <el-form-item label="账号" :label-width="formLabelWidth" prop="loginName">
              <el-input v-model.trim="Addform.loginName" placeholder="请输入" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phonenumber">
              <el-input v-model.trim="Addform.phonenumber" autocomplete="off" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth" prop="position">
              <el-input v-model.trim="Addform.position" autocomplete="off" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="工作年限" :label-width="formLabelWidth" prop="workYears">
              <el-input v-model.trim="Addform.workYears" autocomplete="off" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
              <el-input v-model.trim="Addform.password" autocomplete="off" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="角色" :label-width="formLabelWidth" prop="roleId">
              <el-select v-model="Addform.roleId" :loading="Addupdateloading" placeholder="请选择" @change="selectaddRole">
                <el-option 
                  v-for="item in category"
                  :key="item.roleName"
                  :label="item.roleName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属机构" :label-width="formLabelWidth" prop="userOrg">
              <el-input v-model.trim="Addform.userOrg" placeholder="请选择角色填充" autocomplete="off" disabled/>
              <!-- <el-select v-model="Addform.institution" placeholder="请选择角色" clearable>
                <el-option 
                  v-for="item in category.roleOrg"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
              <el-input v-model.trim="Addform.email" autocomplete="off" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="工号" :label-width="formLabelWidth" prop="jobNumber">
              <el-input v-model.trim="Addform.jobNumber" autocomplete="off" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
              <el-select v-model="Addform.sex" placeholder="请选择">
                <el-option label="男" value="0" />
                <el-option label="女" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
              <el-input v-model.trim="Addform.remark" autocomplete="off" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生年月" :label-width="formLabelWidth" prop="birthDate">
              <el-date-picker 
              placeholder="请选择"
              v-model="Addform.birthDate" 
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 255px;"
              clearable/>
            </el-form-item>
            <el-form-item label="籍贯" :label-width="formLabelWidth" prop="nativePlace">
              <el-input v-model.trim="Addform.nativePlace" autocomplete="off" placeholder="请输入"/>
              <!-- <el-cascader
                :options="pcTextArr"
                :props="props"
                v-model="Addform.region"
                @change="handleChangeAdd"
                style="width: 255px;">
              </el-cascader> -->
            </el-form-item>
            <el-form-item label="创建人" :label-width="formLabelWidth" prop="createBy">
              <el-input v-model.trim="Addform.createBy" autocomplete="off" disabled placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="入职时间" :label-width="formLabelWidth" prop="entryTime">
              <div>
                <el-date-picker 
                placeholder="请选择"
                v-model="Addform.entryTime" 
                type="date" 
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 255px;"
                clearable/>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer common-buttons">
          <el-button type="primary" @click="dialogAddFormVisible = false;formReset(Addform_ref);" >取消</el-button>
          <el-button type="primary" @click="adduserlist(Addform_ref)" >保存</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog v-model="dialogUpdateFormVisible" title="修改用户" width="1100" :inline="true" :show-close="false" style="text-align: left;">
      <el-form ref="Updateform_ref" :model="Updateform" :rules="updaterules"> 
        <el-row>
          <el-col :span="8" >
            <el-form-item label="用户姓名" :label-width="formLabelWidth" prop="nickName">
              <el-input v-model.trim="Updateform.nickName" autocomplete="off" disabled/>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
              <el-input v-model.trim="Updateform.password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phonenumber">
              <el-input v-model.trim="Updateform.phonenumber" autocomplete="off" />
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth" prop="position">
              <el-input v-model.trim="Updateform.position" autocomplete="off" />
            </el-form-item>
            <el-form-item label="工作年限" :label-width="formLabelWidth" prop="workYears">
              <el-input v-model.trim="Updateform.workYears" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="角色" :label-width="formLabelWidth" prop="roleId">
              <el-select v-model="Updateform.roleId" :loading="Addupdateloading" placeholder="请选择" @change="selectupdateRole" >
                <el-option 
                  v-for="item in category"
                  :key="item.roleName"
                  :label="item.roleName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属机构" :label-width="formLabelWidth" prop="userOrg">
              <el-input v-model.trim="Updateform.userOrg" autocomplete="off"/>
              <!-- <el-select v-model="Updateform.institution" placeholder="请选择" clearable>
                <el-option 
                  v-for="item in category.roleOrg"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select> -->
            </el-form-item>
            <!-- <el-form-item label="权限" :label-width="formLabelWidth" >
              <el-select v-model="Updateform.power" placeholder="请输入">
                <el-option 
                  v-for="item in category.power"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
              <el-input v-model.trim="Updateform.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="入职时间" :label-width="formLabelWidth" prop="entryTime">
              <div>
                <el-date-picker 
                  placeholder="请选择"
                  v-model="Updateform.entryTime" 
                  type="date" 
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 255px;"
                  clearable/>
              </div>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
              <el-input v-model.trim="Updateform.remark" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工号" :label-width="formLabelWidth" prop="jobNumber">
              <el-input v-model.trim="Updateform.jobNumber" autocomplete="off" />
            </el-form-item>
            <el-form-item label="修改人" :label-width="formLabelWidth" prop="updateBy">
              <el-input v-model.trim="Updateform.updateBy" autocomplete="off" disabled/>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
              <el-select v-model="Updateform.sex" placeholder="请输入">
                <el-option label="男" value="0" />
                <el-option label="女" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="出生年月" :label-width="formLabelWidth" prop="birthDate">
              <el-date-picker 
                placeholder="请选择"
                v-model="Updateform.birthDate" 
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 255px;"
                clearable/>
            </el-form-item>
            <el-form-item label="籍贯" :label-width="formLabelWidth" prop="nativePlace">
              <el-input v-model.trim="Updateform.nativePlace" autocomplete="off" />
              <!-- <el-cascader
                :options="pcTextArr"
                :props="props"
                v-model="Updateform.region"
                @change="handleChangeUpdate"
                style="width: 255px;">
              </el-cascader> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer common-buttons">
          <el-button type="primary" @click="dialogUpdateFormVisible = false;formReset(Updateform_ref);" >取消</el-button>
          <el-button type="primary" @click="updateuserlist(Updateform_ref)" >保存</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 查看对话框 -->
    <el-dialog v-model="dialogCheckFormVisible" title="查看用户" width="1100" :inline="true" :show-close="false" style="text-align: left;">
      <el-form ref="Checkform_ref" :model="Checkform" disabled>
        <el-row>
          <el-col :span="8" >
            <el-form-item label="用户姓名" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.nickName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="账号" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.loginName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.phonenumber" autocomplete="off" />
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.position" autocomplete="off" />
            </el-form-item>
            <el-form-item label="工作年限" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.workYears" autocomplete="off" />
            </el-form-item>
            <el-form-item label="创建人" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.createBy" autocomplete="off" />
            </el-form-item>
            <el-form-item label="出生年月" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.birthDate" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.password" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机构" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.userOrg" autocomplete="off" />
            </el-form-item>
            <el-form-item label="修改人" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.updateBy" autocomplete="off" />
            </el-form-item>
            <el-form-item label="权限" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.permission" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="入职时间" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.entryTime" autocomplete="off" />
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.createTime" autocomplete="off" />
            </el-form-item>
            <el-form-item label="修改时间" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.updateTime" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.remark" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工号" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.jobNumber" autocomplete="off" />
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.roleName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.sex" autocomplete="off" />
            </el-form-item>
            <el-form-item label="籍贯" :label-width="formLabelWidth" >
              <el-input v-model.trim="Checkform.nativePlace" autocomplete="off" />
            </el-form-item>
            <el-form-item label="上次登入时间" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.loginDate" autocomplete="off" />
            </el-form-item>
            <el-form-item label="登录IP" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.loginIp" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer common-buttons">
          <el-button type="primary" @click="dialogCheckFormVisible = false;formReset(Checkform_ref);" >取消</el-button>
          <el-button type="primary" @click="dialogCheckFormVisible = false;formReset(Checkform_ref);" >确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox} from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { onMounted, ref, reactive } from "vue";
// import { getroleCategory } from '@/api/role_1'
import {  getuserSearch, adduser, updateuser, deluser } from '@/api/system/user'
import { getroleSearch, checkrole} from '@/api/system/role'
//getuserData, , GetusernameOptionBykeywords, GetjobidOptionBykeywords
// import { provinceAndCityData, codeToText, pcTextArr, pcaTextArr } from 'element-china-area-data'//籍贯
import store from '@/store'
import PageHeader from '@/components/page-header/index.vue';
import CommonTable from '@/components/common-table/index.vue';
import {
  Plus,
  Delete,
  Download,
  Promotion,
  Search,
  Setting
} from '@element-plus/icons-vue';
import { Page } from '@/components/common-table/type';
const state = reactive<any>({
  tableData: [],
});
const page = reactive<Page>({
  current: 1,
  pageSize: 20,
});
const total = ref<number>(0);
const loading = ref(false);
const Addupdateloading = ref(false);
//表单
const formtableref = ref<FormInstance>()
const formtable = ref<any>({
});
//籍贯
const props = {
  expandTrigger: 'hover' as const,
}
const handleChangeAdd = () => {
};
const handleChangeUpdate = () => {
};

onMounted(() => {
  onQuery({ pageNo: 1 });
});
//表单重置
const formReset = (formEl:FormInstance) => {
  if (!formEl) return
  formEl.resetFields()
  onQuery({ pageNo: 1 });
};

//提交验证
const submitForm = (formEl: FormInstance) => {
  let x = formEl.validate((valid:any) => {
  })
  return x
}

// const category = ref<any>([{
// }]);[]报错
const category = ref<any>({
});
//获取角色下拉框
const roleDataList = async() =>{
  let params = {
    pageNo:1,
    pageSize:100,//需要更改
    roleName:null,
    roleOrg:null,
  }
  let result = await getroleSearch(params);
  category.value=result.data.rows;
};
roleDataList();

//对应填充下拉框
const selectaddRole = async() =>{
  roleDataList();
  let params = {
    roleId:Addform.value.roleId
  }
  Addupdateloading.value = true;
  let result = await checkrole(params);
  Addupdateloading.value = false;
  //渲染视图
  Addform.value.userOrg=result.data.roleOrg;
};

const selectupdateRole = async() =>{
  roleDataList();
  let params = {
    roleId:Updateform.value.roleId
  }
  Addupdateloading.value = true;
  let result = await checkrole(params);
  Addupdateloading.value = false;
  //渲染视图
  Updateform.value.userOrg=result.data.roleOrg;
};

//表单条件搜索
const onQuery= async(val: any) =>{
  let params = {
    pageNo:page.current,
    pageSize:page.pageSize,
    nickName:formtable.value.username?formtable.value.username:null,
    jobNumber:formtable.value.jobid?formtable.value.jobid:null,
    permission:formtable.value.power?formtable.value.power:null,
    userOrg:formtable.value.institution?formtable.value.institution:null,
    ...val,
  }
  loading.value = true;
  let result = await getuserSearch(params);
  loading.value = false;
  total.value=result.data.totalRows;
  state.tableData=result.data.rows;
};

//添加对话框
const dialogAddFormVisible = ref(false);
const formLabelWidth = '100px'
const Addform_ref = ref<FormInstance>()
const Addform = ref<any>({
  // region: [],?
  // region: '',
});

const ondialogAddFormVisible = () => {
  Addform.value.createBy= store.getters['user/token'];
  dialogAddFormVisible.value = true;
};

//必须同model属性名
const addrules = {
  birthDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
  createBy: [{ required: true, message: '请输入', trigger: 'change' }],
  entryTime: [{ required: true, message: '请输入', trigger: 'change' }],
  jobNumber: [{ required: true, message: '请输入', trigger: 'change' }],
  loginName: [{ required: true, message: '请输入', trigger: 'change' }],
  nativePlace: [{ required: true, message: '请输入', trigger: 'change' }],
  nickName: [{ required: true, message: '请输入', trigger: 'change' }],
  password: [{ required: true, message: '请输入', trigger: 'change' }],
  position: [{ required: true, message: '请输入', trigger: 'change' }],
  remark: [{ required: true, message: '请输入', trigger: 'change' }],
  roleId: [{ required: true, message: '请选择', trigger: 'change' }],
  sex: [{ required: true, message: '请输入', trigger: 'change' }],
  userOrg: [{ required: true, message: '请选择角色填充', trigger: 'change' }],
  workYears: [{ required: true, message: '请输入', trigger: 'change' }],
  phonenumber: [{ required: true, message: '请输入电话号码', trigger: 'blur' },
  { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, message: '电话号码格式错误', trigger: 'change' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },
  { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/, message: '邮箱格式错误', trigger: 'change' }]
}

const adduserlist = async(formEl:FormInstance) =>{
  let x = await submitForm(formEl);
  if(!x){
    return;
  }
  let params = { ...Addform.value};
  let result = await adduser(params);
  ElMessage.success('添加成功');
  dialogAddFormVisible.value=false;
  formReset(formEl);
};

//修改对话框
const dialogUpdateFormVisible = ref(false);
const Updateform_ref = ref<FormInstance>()
const Updateform = ref<any>({
  // region: [],
  // region: '',
});

const onEdit = (row: any) => {
  Updateform.value = row;
  Updateform.value.updateBy = store.getters['user/token'];
  Updateform.value.roleId = idbyname(row.roleName) as any;//rolenamezhuanid 值已改变，选择框不显示
  Updateform.value.sex = row.sex=="0"?'男':'女';
  dialogUpdateFormVisible.value = true;
};

//管理员name查找roleid
const idbyname = (name:any) => {
  roleDataList();
  const a = category.value.filter(item => item.roleName === name)
  return a.pop()?.id
}

const updaterules = {
  nickName: [{ required: true, message: '请输入', trigger: 'change' }],
  position: [{ required: true, message: '请输入', trigger: 'change' }],
  workYears: [{ required: true, message: '请输入', trigger: 'change' }],
  updateBy: [{ required: true, message: '请输入', trigger: 'change' }],
  userOrg: [{ required: true, message: '请输入', trigger: 'change' }],
  entryTime: [{ required: true, message: '请输入', trigger: 'change' }],
  jobNumber: [{ required: true, message: '请输入', trigger: 'change' }],
  roleId: [{ required: true, message: '请输入', trigger: 'change' }],
  birthDate: [{ required: true, message: '请输入', trigger: 'change' }],
  nativePlace: [{ required: true, message: '请输入', trigger: 'change' }],
  password: [{ required: true, message: '请输入', trigger: 'change' }],
  remark: [{ required: true, message: '请输入', trigger: 'change' }],
  sex: [{ required: true, message: '请输入', trigger: 'change' }],
  phonenumber: [{ required: true, message: '请输入电话号码', trigger: 'change' },
  { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, message: '电话号码格式错误', trigger: 'change' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },
  { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/, message: '邮箱格式错误', trigger: 'change' }]
}

const updateuserlist = async(formEl:FormInstance) =>{
  let x = await submitForm(formEl);
  if(!x){
    return;
  }
  Updateform.value.sex = Updateform.value.sex=='男'?"0":"1";
  let params = { ...Updateform.value};
  let result = await updateuser(params);
  ElMessage.success('修改成功');
  dialogUpdateFormVisible.value=false;
  formReset(formEl);
};

//查看对话框
const dialogCheckFormVisible = ref(false);
const Checkform_ref = ref<FormInstance>()
const Checkform = ref<any>({
});

const onCheck = (row: any) => {
  Checkform.value = row;
  Checkform.value.sex = row.sex=="0"?'男':'女';
  dialogCheckFormVisible.value = true;
};

const handleChangeCheck = () => {
};

//删除
const onDelete = (row:any) => {
  ElMessageBox.confirm(
    '确定要删除此用户信息吗?',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      let params = {
        userId:row.id
      }
      let result = await deluser(params);
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      onQuery({ pageNo: 1 });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '用户取消删除',
      })
    })
}

//模糊搜索
// const usernameOptions = ref([]);
// const usernameloading = ref(false);
// const getusernameOptions = async(query:any) =>{
//   if (query!=''){
//     let params = {
//       username:query
//     }
//     usernameloading.value = true;
//     let result = await GetusernameOptionBykeywords(params);
//     usernameloading.value = false;
//     usernameOptions.value = result.data.usernameOptions;
//   }else{
//     usernameOptions.value = [];
//   }
  
// }

// const jobidOptions = ref([]);
// const jobidloading = ref(false);
// const getjobidOptions = async(query:any) =>{
//   if (query!=''){
//     let params = {
//       jobid:query
//     }
//     jobidloading.value = true;
//     let result = await GetjobidOptionBykeywords(params);
//     jobidloading.value = false;
//     jobidOptions.value = result.data.jobidOptions;
//   }else{
//     jobidOptions.value = [];
//   }
  
// }
</script>
<style  lang="scss" scoped>
@import '@/assets/style/buttons';
.user-contain {
  .search {
    display: flex;
    :deep() {
      .el-input--small .el-input__wrapper {
        margin-right: 10px;
      }
    }
  }

  .layout-container-table {
    .el-button--small {
      background: transparent;
      color: rgba(24, 81, 237, 1);
    }
  }

  .el-form-item .el-select {
    width: 100%;
  } 
  .search .span1{
    display: inline-block;
    width: 80px;
    margin: auto;
    font-size:14px;
    text-align: center;
  }
  .search .el-input{
    position: relative;
    top: 10px;
    width: 200px;
    margin: auto;
  }
  .search .el-button {
    position: relative;
    top: 10px;
  }

  :deep() {
    .el-dialog__body {
      padding: 10px 20px;
    }
  }
  // .btns{
  //   position: relative;
  //   top: -10px;
  // }
  
}

</style>